<template>
  <view class="container">
  
    
    <view class="backorder-container">
     <view class="info-box">
        <text class="info-text">温馨提示：</text>
        <text class="info-detail">Please Note:</text>
        <text class="info-detail">选择线下扫码领取，则不能缺货登记。选择线上缺货登记，则不能线下扫码领取。</text>
        <text class="info-detail">On-site pickup and backorder registration are mutually exclusive options.</text>
      </view>
      
      <view class="form-item">
        <text class="label">姓名 Name：</text>
        <input class="input" type="text" v-model="form.name" placeholder="请输入姓名" />
      </view>
      
      <view class="form-item">
        <text class="label">联系电话 Phone Number：</text>
        <input class="input" type="number" v-model="form.phone" placeholder="请输入手机号码" />
      </view>
      
      <view class="form-item">
        <text class="label">省市区 State/Province/City/District：</text>
        <input class="input" type="text" v-model="form.region" placeholder="请选择省市区" />
      </view>
      
      <view class="form-item">
        <text class="label">详细地址 Detailed Address：</text>
        <input class="input" type="text" v-model="form.address" placeholder="请输入详细地址" />
      </view>
      
      <button class="edit-btn" @click="editAddress">修改Edit Address</button>
      <button class="backorder-btn" @click="submitBackorder">缺货登记</button>
    </view>
    
    <view class="footer">
      <text>成芯软件提供技术支持</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        region: '',
        address: ''
      }
    }
  },
  onLoad() {
    // 从本地存储中获取用户在地址页面填写的信息
    const userAddress = uni.getStorageSync('userAddress')
    if (userAddress) {
      this.form = userAddress
    }
  },
  
  methods: {
    editAddress() {
      // 点击修改地址按钮跳转到确认提示页面
      uni.navigateTo({
        url: '/pages/confirmation/confirmation'
      })
    },
    
    submitBackorder() {
      // 提交缺货登记
      console.log('提交缺货登记', this.form)
      uni.showToast({
        title: '缺货登记成功',
        icon: 'success',
        duration: 1500,
        success: () => {
          // 可以在这里添加成功后的操作，比如返回首页
          setTimeout(() => {
            uni.navigateBack({
              delta: 3 // 返回首页
            })
          }, 1500)
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.backorder-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 60rpx 30rpx;
  background-color: #fff;
}

.info-box {
  background-color: #FFE9D4;
  border: 1rpx solid #FFE9D4;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
}

.info-text {
  color: #fa8c16;
  font-size: 28rpx;
  font-weight: bold;
}

.info-detail {
  display: block;
  color: #fa8c16;
  font-size: 26rpx;
  margin-top: 10rpx;
  line-height: 1.5;
}

.form-item {
  margin-bottom: 60rpx;
}

.label {
  display: block;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.input:focus {
  outline: none;
  border-color: #1890ff;
}

.edit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #1890ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.backorder-btn {
  width: 60%;
  height: 80rpx;
  background-color: #fff;
  color: #1890ff;
  font-size: 28rpx;
  border: 2rpx solid #1890ff;
  border-radius: 40rpx;
  align-self: center;
}

.footer {
  padding: 20rpx 0;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  background-color: #fff;
}
</style>